<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>消息盒子</title>

  <link rel="stylesheet" href="/layui/css/layui.css">
  <style>
    .layim-msgbox {
      margin: 15px;
    }

    .layim-msgbox li {
      position: relative;
      margin-bottom: 10px;
      padding: 0 130px 10px 60px;
      padding-bottom: 10px;
      line-height: 22px;
      border-bottom: 1px dotted #e2e2e2;
    }

    .layim-msgbox .layim-msgbox-tips {
      margin: 0;
      padding: 10px 0;
      border: none;
      text-align: center;
      color: #999;
    }

    .layim-msgbox .layim-msgbox-system {
      padding: 0 10px 10px 10px;
    }

    .layim-msgbox li p span {
      padding-left: 5px;
      color: #999;
    }

    .layim-msgbox li p em {
      font-style: normal;
      color: #FF5722;
    }

    .layim-msgbox-avatar {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
    }

    .layim-msgbox-user {
      padding-top: 5px;
    }

    .layim-msgbox-content {
      margin-top: 3px;
    }

    .layim-msgbox .layui-btn-small {
      padding: 0 15px;
      margin-left: 5px;
    }

    .layim-msgbox-btn {
      position: absolute;
      right: 0;
      top: 12px;
      color: #999;
    }
  </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>

<div style="margin: 0 15px;">
  <blockquote class="layui-elem-quote">
    注意：该页面为 msgbox 参数指向的自定义页面。
    <br> 此页为消息盒子的模拟数据，实际使用时请进行相应修改。
  </blockquote>
</div>

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.from){ }}
    <li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}">
      <a href="/u/{{ item.from }}/" target="_blank">
        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
      <p class="layim-msgbox-user">
        <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
        <span>{{ item.time }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }} 
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
    </li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法
-->


<script src="/layui/layui.js"></script>
<script>
  layui.config({
    layimPath: '../../' //配置 layim.js 所在目录
    , layimAssetsPath: '../' //layim 资源文件所在目录
  }).extend({
    layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
  }).use(['layim', 'flow'], function () {
    var layim = layui.layim
      , layer = layui.layer
      , laytpl = layui.laytpl
      , $ = layui.jquery
      , flow = layui.flow;

    var cache = {}; //用于临时记录请求到的数据

    //请求消息
    var renderMsg = function (page, callback) {

      //实际部署时，请将下述 getmsg.json 改为你的接口地址

      $.get('getmsg.json', {
        page: page || 1
      }, function (res) {
        if (res.code != 0) {
          return layer.msg(res.msg);
        }

        //记录来源用户信息
        layui.each(res.data, function (index, item) {
          cache[item.from] = item.user;
        });

        callback && callback(res.data, res.pages);
      });
    };

    //消息信息流
    flow.load({
      elem: '#LAY_view' //流加载容器
      , isAuto: false
      , end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
      , done: function (page, next) { //加载下一页
        renderMsg(page, function (data, pages) {
          var html = laytpl(LAY_tpl.value).render({
            data: data
            , page: page
          });
          next(html, page < pages);
        });
      }
    });

    //打开页面即把消息标记为已读
    /*
    $.post('/message/read', {
      type: 1
    });
    */

    //操作
    var active = {
      //同意
      agree: function (othis) {
        var li = othis.parents('li')
          , uid = li.data('uid')
          , from_group = li.data('fromGroup')
          , user = cache[uid];

        //选择分组
        parent.layui.layim.setFriendGroup({
          type: 'friend'
          , username: user.username
          , avatar: user.avatar
          , group: parent.layui.layim.cache().friend //获取好友分组数据
          , submit: function (group, index) {

            //将好友追加到主面板
            parent.layui.layim.addList({
              type: 'friend'
              , avatar: user.avatar //好友头像
              , username: user.username //好友昵称
              , groupid: group //所在的分组id
              , id: uid //好友ID
              , sign: user.sign //好友签名
            });
            parent.layer.close(index);
            othis.parent().html('已同意');


            //实际部署时，请开启下述注释，并改成你的接口地址
            /*
            $.post('/im/agreeFriend', {
              uid: uid //对方用户ID
              ,from_group: from_group //对方设定的好友分组
              ,group: group //我设定的好友分组
            }, function(res){
              if(res.code != 0){
                return layer.msg(res.msg);
              }

              //将好友追加到主面板
              parent.layui.layim.addList({
                type: 'friend'
                ,avatar: user.avatar //好友头像
                ,username: user.username //好友昵称
                ,groupid: group //所在的分组id
                ,id: uid //好友ID
                ,sign: user.sign //好友签名
              });
              parent.layer.close(index);
              othis.parent().html('已同意');
            });
            */

          }
        });
      }

      //拒绝
      , refuse: function (othis) {
        var li = othis.parents('li')
          , uid = li.data('uid');

        layer.confirm('确定拒绝吗？', function (index) {
          layer.close(index);
          othis.parent().html('<em>已拒绝</em>');

          /*
          $.post('/im/refuseFriend', {
            uid: uid //对方用户ID
          }, function(res){
            if(res.code != 0){
              return layer.msg(res.msg);
            }
            layer.close(index);
            othis.parent().html('<em>已拒绝</em>');
          });
          */
        });
      }
    };

    $('body').on('click', '.layui-btn', function () {
      var othis = $(this), type = othis.data('type');
      active[type] ? active[type].call(this, othis) : '';
    });
  });
</script>
</body>
</html>
